<template>

	<view>
		<bg-video></bg-video>
		<cu-custom bgColor="bg-main" :isBack="true">
			<block class="text-white" slot="content">会员类型</block>
		</cu-custom>
		<view class="bg-white margin-top-sm">
			<view class="padding-bottom-sm">
				<view v-for="(hylx,index) in ahylxs" :key="index">
					<view @click="toBuy(hylx.hylxid)"
						class="margin-sm shadow bg-white padding-xs flex">
						<view class="w-25 flex flex-direction justify-center align-center">
							<view class="cu-avatar round df" :style="{backgroundImage: `url(${hylx.jcover})`}"></view>
							<view class="text-center">{{hylx.jlname ? hylx.jlname : "未设置"}}</view>
						</view>
						<view class="w-75">
							<view class="padding-xs flex justify-between">
								<text>{{hylx.hlname}}</text>
								<text>￥{{hylx.amount / 100}}</text>
							</view>
							<view class="padding-xs flex justify-between">
								<text>{{hylx.cs}}次</text>
								<text>{{hylx.zq}}天有效</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="ahylxs.length < pageInfo.total" class="padding flex flex-direction">
				<button class="cu-btn bg-green lg" @tap="loadMore">显示更多</button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data: function() {
			return {
				ahylxs: [],
				pageInfo: {
					current: 1,
					total: 0,
					size: 3
				},
			}
		},
		onLoad: function(option) {
			this.search();
		},
		methods: {
			toBuy: function(hylxid) {
				uni.navigateTo({
					url: '/pages/cxy/hy/new?hylxid='+hylxid
				});
			},
			search: function() {
				this.ahylxs = [];
				this.loadHylxs();
			},
			loadHylxs: function() {
				return this.api("/jl/hylx/page").send({
					current: this.pageInfo.current,
					size: this.pageInfo.size
				}).then(data => {
					console.log(data);
					this.ahylxs.push(...this.ahylxs, ...data.ahylx.records);
					this.pageInfo.total = data.ahylx.total;
				});
			},
			loadMore: function() {
				this.pageInfo.current++;
				this.loadHylxs();
			}

		}
	}
</script>

<style>
</style>